<template>
  <div style="position: relative;width: 100%;">
    <el-row>
      <el-col :span="10">
       <div>
          <h2>商机转化率</h2>
          <h4>本年度线索转商机成功率</h4>
        </div>
        <div >
        <el-form :model="ring" size="mini" @submit.native.prevent >
          <el-form-item label="年份选择" style="display:inline-block;margin-right:20px;">
            <el-select v-model="ringYear" placeholder="全部" clearable @change="ringChange">
              <el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务类型" style="display:inline-block;">
            <el-cascader
              v-model="ringType"
              placeholder="全部"
              ref="ref_business"
              :options="businesstypeTree"
              :props="typeProps"
              :show-all-levels="false"
              clearable
              @change="ringChange">
            </el-cascader>
          </el-form-item>
          <div class="t" id="ring" :style="{width: '300px', height: '400px'}"></div>
        </el-form>
        </div>
      </el-col>
      <!-- <el-col :span="2" ><div class="grid-content bg-purple-light"></div></el-col> -->
      <el-col :span="14" >
        <div>
        <h2>各业务类型线索占比</h2>
        <h4>各业务类型数量及占比</h4>
        </div>
        <el-form :model="pie2" size="mini" @submit.native.prevent >
          <el-form-item label="年份选择" style="display:inline-block;margin-right:20px;">
            <el-select v-model="pieYear" placeholder="全部" clearable @change="pieChange">
              <el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" ><!-- :disabled="item.disabled" -->
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务类型" style="display:inline-block;">
            <el-cascader
              v-model="pieType"
              placeholder="全部"
              ref="ref_business"
              :options="businesstypeTree"
              :props="typeProps"
              :show-all-levels="false"
              clearable
              @change="pieChange">
            </el-cascader>
          </el-form-item>
          <div style="width:85%;">
            <div class="c" id="pie" :style="{width: '400px', height: '400px'}"></div>
          </div>
        </el-form>
      </el-col>
      <el-col :span="20">
        <span style="width:100%;display:inline-block">
        <div style="float:left">
          <h2>员工商机转化率</h2>
          <h4>员工线索转商机成功率</h4>
        </div>
        <div style="float:right;">
        <el-form :model="pie2" size="mini" @submit.native.prevent >
          <el-form-item label="年份选择" style="display:block;float:left;margin-top:26px;margin-right:20px;">
            <el-select v-model="tableYear" placeholder="全部" clearable @change="loadTableData">
                <el-option
                   v-for="item in options"
                  :key="item.value"
                  :label="item.lable"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            <!-- <el-select v-model="year" placeholder="全部" >
              <el-option v-for="i in yOption" :key="i.value" :label="i.label" :value="i.value" >
              </el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="业务类型" style="display:block;margin-top:26px;float:left;">
            <el-cascader
              v-model="tableType"
              placeholder="全部"
              ref="ref_business"
              :options="businesstypeTree"
              :props="typeProps"
              :show-all-levels="false"
              clearable
              @change="loadTableData">
            </el-cascader>
          </el-form-item>
        </el-form>
        </div>
        </span>
        <div>
            <el-table :data="tableData" style="width: 100%;" max-height="300" border="1px solid gray">
              <el-table-column prop="no" label="序号" show-overflow-tooltip></el-table-column>
              <el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
              <el-table-column prop="total" label="线索总数" show-overflow-tooltip></el-table-column>
              <el-table-column prop="wins" label="成功数量" show-overflow-tooltip></el-table-column>
              <el-table-column prop="loses" label="失败数量" show-overflow-tooltip></el-table-column>
              <el-table-column prop="rate" label="商机转化率" show-overflow-tooltip></el-table-column>
            </el-table>
            <!-- <el-row type="flex" justify="end" style="margin-top: 10px;">
                <el-pagination background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNo"
                    :page-size="page_size"
                    :page-sizes="[10, 20, 30]"
                    layout="total, prev, pager, next, sizes"
                    :total="total"></el-pagination>
                </el-row> -->
          </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts';
import { Businesstype } from '@/api/business.js';
import { InvitationStatisticsTable } from '@/api/bigdata.js';
export default {
  data () {
    return {
      businesstypeTree: [],
      options: [],
      ringYear: null,
      ringType: [],
      ringdata: null,
      pieYear: null,
      pieType: [],
      piedata: null,
      tableYear: null,
      tableType: [],
      tableData: [],
      typeProps: {
        value: 'id',
        label: 'businessName',
        checkStrictly: true /*  multiple: true, */,
        children: 'children'
      }
    };
  },
  mounted () {
    this.loadYearRange();
    this.loadbusinesstypeTree();
    this.ringChange();
    this.pieChange();
    this.loadTableData();
  },
  methods: {
    // 级联下拉列表数据获取
    loadbusinesstypeTree () {
      return new Promise((resolve, reject) => {
        Businesstype.tree(this)
          .then((res) => {
            this.businesstypeTree = res.data;
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    // 年份列表数据获取
    loadYearRange () {
      let params = {year: 0};
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.anaYearRange(this, params).then(res => {
          let thisYear = new Date().getFullYear();
          for (let i = res.data - 2; i <= thisYear; i++) {
            this.options.push({value: i, label: i});
          }
        }).catch(e => {
          reject(e)
        })
      })
    },
    // 绘制环形图
    initRing () {
      let getRing = echarts.init(document.getElementById('ring'));
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          x: 'right',
          y: 'bottom',
          left: 'center'
        },
        series: [
          {
            name: '商机转化',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.ringdata
          }
        ]
      };
      getRing.setOption(option)
    },
    // 获取环形图数据
    ringChange () {
      let params = {
        year: this.ringYear ? this.ringYear : null,
        businessType: this.ringType[this.ringType.length - 1]
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.clueOppoRate(this, params).then(res => {
          this.ringdata = res.data;
          this.initRing();
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 绘制饼状图
    initPie () {
      let getPie = echarts.init(document.getElementById('pie'));
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            name: '线索个数',
            type: 'pie',
            radius: '50%',
            data: this.piedata,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      getPie.setOption(option)
    },
    // 获取饼状图数据
    pieChange () {
      let params = {
        year: this.pieYear ? this.pieYear : null,
        businessType: this.pieType[this.pieType.length - 1]
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.clueClassify(this, params).then(res => {
          this.piedata = res.data;
          this.initPie();
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 获取表格数据
    loadTableData () {
      let params = {
        year: this.tableYear ? this.tableYear : null,
        businessType: this.tableType[this.tableType.length - 1]
        // size: this.page_size,
        // current: this.pageNo
        // 未分页
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.clueUserRate(this, params).then(res => {
          // this.tableData = res.data.records
          // this.total = res.data.total
          this.tableData = res.data
        }).catch(e => {
          reject(e);
        });
      });
    }
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  }
};
</script>
